<template>
  <div>
    <Login :visible.sync="visible" :isShow.sync="isShow"></Login>
    <div class="header">
      <div class="header-top">
        <div class="header-total-box">
          <a class="header-left" href="javascript:;"></a>
          <ul>
            <li>
              <span
                ><a href=""
                  ><em>发现音乐</em> <span class="cor">&nbsp;</span></a
                ></span
              >
            </li>
            <li>
              <span
                ><a href=""><em>我的音乐</em> <span>&nbsp;</span></a></span
              >
            </li>
            <li>
              <span
                ><a href=""><em>关注</em> <span>&nbsp;</span></a></span
              >
            </li>
            <li>
              <span
                ><a href=""><em>商城</em> <span>&nbsp;</span></a></span
              >
            </li>
            <li>
              <span
                ><a href=""><em>音乐人</em> <span>&nbsp;</span></a></span
              >
            </li>
            <li>
              <span
                ><router-link to="/down"
                  ><em>下载客户端</em> <span></span></router-link
              ></span>
            </li>
          </ul>
          <div class="header-right">
            <form class="search-sing">
              <span class="iconfont icon-sousuo"></span>
              <input type="text" placeholder="音乐/视频/电台/用户" />
            </form>
            <div class="creator-center">
              <a href="">创作者中心</a>
            </div>
            <div class="login-btn">
              <a @click="visible = true" v-if="!isShow">登录</a>
              <img
                src="https://p2.music.126.net/vrscgwblkecaKOFw1liTrA==/109951163754784737.jpg?param=30y30"
                alt=""
                width="30px"
                v-else
              />
            </div>
          </div>
        </div>
      </div>
      <div class="header-bottom">
        <div class="header-bottom-content">
          <ul>
            <li>
              <router-link :to="'/'"><em>推荐</em></router-link>
            </li>
            <li>
              <router-link to="/ranklist"><em>排行榜</em></router-link>
            </li>
            <li>
              <router-link :to="'/songlist'"><em>歌单</em></router-link>
            </li>
            <li>
              <router-link :to="'/radio'"><em>主播电台</em></router-link>
            </li>
            <li>
              <router-link :to="'/singer'"><em>歌手</em></router-link>
            </li>
            <li>
              <router-link :to="'/newdisc'"><em>新碟上架</em></router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqUserMusicList } from "@/api/index.js";
export default {
  name: "Header",
  data() {
    return {
      visible: false,
      isShow: false,
    };
  },
  async mounted() {
    const result = await reqUserMusicList(1);
    console.log(result);
  },
};
</script>

<style lang="less" scoped>
.header {
  .header-top {
    background-color: #242424;
    // background-color: skyblue;
    .header-total-box {
      position: relative;
      height: 70px;
      width: 1100px;
      margin: 0 auto;
      .header-left {
        float: left;
        background: url(./images/topbar.png) no-repeat 0 0;
        width: 157px;
        padding: 0 20px 0 0;
        height: 100%;
      }
      ul {
        float: left;
        height: 70px;
        li {
          text-align: center;
          line-height: 70px;
          height: 100%;
          float: left;
          font-size: 14px;
          span {
            width: 100%;
            height: 100%;
            a {
              display: block;
              padding: 0 19px;
              height: 100%;
              em {
                display: inline-block;
                color: #ccc;
              }
              em:hover {
                color: #fff;
              }
            }
            a:hover {
              text-decoration: none;
              background-color: #000;
            }
            .cor {
              display: block;
              position: absolute;
              left: 223px;
              top: 64px;
              width: 12px;
              height: 7px;
              overflow: hidden;
              margin-left: -6px;
              background: url(./images/topbar.png) no-repeat 0 9999px;
              background-position: -226px 0;
              z-index: 999;
            }
          }
        }
      }
      .header-right {
        display: flex;
        justify-content: flex-end;
        height: 100%;
        align-items: center;
        .search-sing {
          background-color: #fff;
          border-radius: 32px;
          width: 158px;
          height: 32px;
          input {
            border: none;
            outline: none;
            margin: 8px 0 0 3px;
          }
          span {
            margin: 1px 0 0 3px;
          }
        }
        .creator-center {
          width: 90px;
          height: 32px;
          margin-left: 12px;
          border: 1px solid #4f4f4f;
          border-radius: 20px;
          a {
            float: left;
            padding: 8px 0 0 16px;
            height: 100%;
            color: #ccc;
          }
          a:hover {
            color: #fff;
            text-decoration: none;
          }
        }
        .creator-center:hover {
          border: 1px solid #ccc;
        }
        .login-btn {
          margin-left: 20px;
          padding: 0 22px 0 0;
          a {
            color: #787878;
            background-color: #242424;
            border: none;
          }
          a:hover {
            cursor: pointer;
            color: #999;
          }
        }
      }
    }
  }
  .header-bottom {
    height: 34px;
    background-color: #c20c0c;
    .header-bottom-content {
      margin: 0 auto;
      width: 1100px;
      ul {
        width: 564px;
        height: 34px;
        padding-left: 183px;
        li {
          a {
            line-height: 34px;
            float: left;
            em {
              color: #ccc;
              height: 10px;
              padding: 0 13px;
              margin: 7px 17px 0;
            }
          }
        }
      }
    }
  }
}
</style>
